<template>
    <div style="width: 100%">
        <h1>通知</h1>

        <!--查看通知人员-->
        <el-dialog title="通知人员表" :visible.sync="lookPeople">

            <el-tabs v-model="activeName" >
                <el-tab-pane label="学生" name="first">
                    <el-table
                            :data="noticeStudentList"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="student.name"
                                label="姓名"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="check"
                                label="是否阅读"
                                width="200">
                            <template slot-scope="scope">
                                <el-tag v-show="scope.row.check" type="info">已读</el-tag>
                                <el-tag v-show="!scope.row.check" type="success">未读</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--        分页-->
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :current-page="noticeStudentPageNum"
                            :page-size="noticeStudentPageInfo.pageSize"
                            :total="noticeStudentPageInfo.total"
                            :hide-on-single-page="true"
                            @current-change="handleNoticeStudent"
                    >
                    </el-pagination>
                </el-tab-pane>

                <el-tab-pane label="老师" name="second">
                    <el-table
                            :data="noticeTeacherList"
                            border
                            style="width: 100%">

                        <el-table-column
                                prop="teacher.name"
                                label="姓名"
                                width="200">
                        </el-table-column>

                        <el-table-column
                                prop="check"
                                label="是否阅读"
                                width="200">
                            <template slot-scope="scope">
                                <el-tag v-show="scope.check" type="info">已读</el-tag>
                                <el-tag v-show="!scope.check" type="success">未读</el-tag>
                            </template>
                        </el-table-column>

                    </el-table>
                    <!--        分页-->
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :current-page="noticeTeacherPageNum"
                            :page-size="noticeTeacherPageInfo.pageSize"
                            :total="noticeTeacherPageInfo.total"
                            :hide-on-single-page="true"
                            @current-change="handleNoticeTeacher"
                    >
                    </el-pagination>
                </el-tab-pane>


            </el-tabs>

            <span slot="footer" class="dialog-footer">
                <el-button @click="lookPeople = false">取 消</el-button>
                <el-button type="primary" @click="lookPeople = false">确 定</el-button>
            </span>
        </el-dialog>

        <!--通知列表-->
        <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="noticeList"
                tooltip-effect="dark"
                style="width: 90%;margin: 0 auto">


            <el-table-column
                    label="标题"
                    prop="title"
                    min-width="5%">
            </el-table-column>

            <el-table-column
                    prop="inputTeacher.name"
                    label="发布教师"
                    min-width="5%">
            </el-table-column>

            <el-table-column
                    prop="readNumber"
                    label="阅读人数"
                    min-width="5%">
            </el-table-column>

            <el-table-column
                    label="操作"
                    min-width="5%" >
                <template slot-scope="scope">
                    <el-button @click="handleLookPeople(scope.row.id)">点击查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--        分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                :hide-on-single-page="true"
                @current-change="handleStudentList"
        >
        </el-pagination>

    </div>
</template>

<script>
    let id = 0;
    export default {
        name: "ManageNotificationView",
        data() {
            let studentOrClassesSelector = (rule,value,callback) => {
                if(!value){
                    if(!this.show){
                        callback();
                    }
                    callback(new Error('学生或班级至少选择一个'));
                }else {
                    callback();
                }
            };

            return {
                form: {
                    typeId:1,
                    levelId:1,
                    publish:false,
                    title: '',
                    content:''
                },
                noticeList:[],
                pageNum:1,
                student: {sex:"全部"},
                pageInfo: [],
                studentList: [],
                multipleSelection: [],
                input:'',
                noticeLevelList: [],
                noticeTypeList:[],
                dialogFormVisible : false,
                loading: true,
                show: true,

                //查看人员弹窗
                lookPeople:false,
                //人员列表
                noticeTeacherList:[],
                noticeStudentList:[],
                activeName:'first',
                noticeTeacherPageInfo:{},
                noticeStudentPageInfo:{},

                noticeTeacherPageNum:1,
                noticeStudentPageNum:1,
                lookNoticeId:'',

                //学生或班级选择
                props: {
                    // emitPath:false,//返回值只有value
                    multiple: true,
                    lazy: true,
                    lazyLoad: this.handleGetClassOrStudent,
                },

            }

        },
        created() {
            this.handleStudentList()
        },
        methods: {


            //列表 条件查询
            handleStudentList(pageNum) {
                this.loading = true;
                if (typeof pageNum == "number") {
                    this.pageNum = pageNum;
                } else {
                    this.pageNum = 1;
                }

                // console.log(this.student)
                this.$axios.post("/manage/notice/list",{},{params:{pageNum:this.pageNum}}).then(response => {
                    // console.log(response)
                    this.pageInfo = response.data.noticeList;
                    this.noticeList = response.data.noticeList.list;
                    this.noticeLevelList = response.data.noticeLevelList;
                    this.noticeTypeList = response.data.noticeTypeList;
                    this.loading = false;
                })
            },


            //通知人员查看
            handleLookPeople(id){
                this.lookPeople = true;
                this.lookNoticeId = id;
                console.log(id)

                this.$axios.get("/manage/noticeRecord/findByStudent?id="+id).then( res => {
                    this.noticeStudentList=res.data.data.list;
                    this.noticeStudentPageInfo=res.data.data;
                    console.log(res)
                })

                this.$axios.get("/manage/noticeRecord/findByTeacher?id="+id).then( res => {
                    this.noticeTeacherList=res.data.data.list;
                    this.noticeTeacherPageInfo=res.data.data;
                    console.log(res)
                })

            },

            handleNoticeStudent(noticeStudentPageNum){
                let id = this.lookNoticeId;
                if (typeof noticeStudentPageNum == "number") {
                    this.noticeStudentPageNum = noticeStudentPageNum;
                } else {
                    this.noticeStudentPageNum = 1;
                }
                this.$axios.get("/manage/noticeRecord/findByStudent?id="+id+"&pageNum="+noticeStudentPageNum).then( res => {
                    this.noticeStudentList=res.data.data.list;
                    this.noticeStudentPageInfo=res.data.data;
                    // console.log(res)
                })
            },
            handleNoticeTeacher(noticeTeacherPageNum){
                let id = this.lookNoticeId;
                if (typeof noticeTeacherPageNum == "number") {
                    this.noticeTeacherPageNum = noticeTeacherPageNum;
                } else {
                    this.noticeTeacherPageNum = 1;
                }
                this.$axios.get("/manage/noticeRecord/findByTeacher?id="+id+"&pageNum="+noticeTeacherPageNum).then( res => {
                    this.noticeTeacherList=res.data.data.list;
                    this.noticeTeacherPageInfo=res.data.data;
                    // console.log(res)
                })
            }
        }
    }
</script>

<style scoped>
    body{
        text-align: center;
    }

    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand  label{
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-left: 10%;
        margin-bottom: 0;
        width: 50%;
        display: block;
    }
</style>